import React, { useState } from 'react';
import { Form, Row, Select, Radio } from 'antd';
import styles from './index.less';

const { Option } = Select;

const RadioSelectFormItem = props => {
    const {
        isDetail = false, // 是否为详情页
        data = {}, // 详情页的数据
        form,
        label = '请传入label',
        field = 'taskRoleType',
        fieldMessage = '请选择评分人类型',
        roleField = 'roleTypes',
        roleMessage = '请选择任务角色',
        customField = 'employees',
        customMessage = '请选择自定义评分人',
        userConfig,
        employeeList,
        defaultType,
        roleOptions = [
            { label: '发起人', value: 1 },
            { label: '审核人', value: 2 },
            { label: '参与人', value: 4 },
            { label: '验收人', value: 5 }
        ]
    } = props;
    const { getFieldDecorator } = form;
    const [currentAssessPersonType, setCurrentAssessPersonType] = useState(defaultType || undefined);
    const [personOptions, setPersonOptions] = useState(defaultType === '2' ? employeeList : []);

    const taskRoleType = {
        ROLE: { value: '1', targetField: roleField, message: roleMessage, text: '按任务角色' },
        CUSTOM: { value: '2', targetField: customField, message: customMessage, text: '自定义' }
    };
    const assessPersonType = Object.values(taskRoleType).reduce((prev, curr) => {
        const newPrev = { ...prev };
        newPrev[curr.value] = curr;
        return newPrev;
    }, {});

    form.getFieldDecorator(taskRoleType.ROLE.targetField, { initialValue: [] });
    form.getFieldDecorator(taskRoleType.CUSTOM.targetField, { initialValue: [] });

    const onPersonTypeChange = e => {
        const val = e.target.value;
        setCurrentAssessPersonType(val);
        form.resetFields();
        if (val === taskRoleType.ROLE.value) {
            // form.setFieldsValue({ [taskRoleType.CUSTOM.targetField]: [] });
            setPersonOptions(roleOptions);
        } else if (val === taskRoleType.CUSTOM.value) {
            // form.setFieldsValue({ [taskRoleType.ROLE.targetField]: [] });
            setPersonOptions(employeeList);
        }
    };

    const component = (
        <Select mode="multiple" disabled={isDetail} allowClear>
            {Array.isArray(personOptions) &&
                personOptions.map(item => (
                    <Option value={item.value} key={item.value}>
                        {item.label}
                    </Option>
                ))}
        </Select>
    );

    const getDefaultValueList = dataField => {
        const target = Object.values(taskRoleType).find(item => item.value === data[field]);
        if (dataField && target) {
            if (target === taskRoleType.ROLE) {
                return data[target.targetField];
            }
            if (target === taskRoleType.CUSTOM) {
                return data[target.targetField] && data[target.targetField].map(item => item.employeeName);
            }
        }
        if (!dataField && userConfig && userConfig.configJson) {
            if (currentAssessPersonType === taskRoleType.CUSTOM.value) {
                const json = JSON.parse(userConfig.configJson);
                if (json.length > 0) {
                    return json.map(item => JSON.stringify(item));
                }
            }
        }
        return [];
    };

    React.useEffect(() => {
        if (data[field]) {
            const target = Object.values(taskRoleType).find(item => item.value === data[field]);
            form.setFieldsValue({ [target.targetField]: getDefaultValueList(data[field], target) });
            onPersonTypeChange({ target: { value: data[field] } });
        }
    }, [data[field]]);

    return (
        <>
            <Form.Item label={label} required className={styles.radioSelect} key={`${field}wrap`}>
                <Row>
                    <Form.Item key="first">
                        {!isDetail &&
                            getFieldDecorator(field, {
                                initialValue: defaultType || '',
                                rules: [
                                    {
                                        required: true,
                                        message: fieldMessage
                                    }
                                ]
                            })(
                                <Radio.Group onChange={onPersonTypeChange}>
                                    <Radio value={taskRoleType.ROLE.value} key={taskRoleType.ROLE.value}>
                                        {taskRoleType.ROLE.text}
                                    </Radio>
                                    <Radio value={taskRoleType.CUSTOM.value} key={taskRoleType.CUSTOM.value}>
                                        {taskRoleType.CUSTOM.text}
                                    </Radio>
                                </Radio.Group>
                            )}
                        {isDetail &&
                            data[field] &&
                            Object.values(taskRoleType).find(item => item.value === data[field]).text}
                    </Form.Item>
                </Row>
                <Row className={styles.secondLine}>
                    <Form.Item key="second">
                        {currentAssessPersonType &&
                            form.getFieldDecorator(assessPersonType[currentAssessPersonType].targetField, {
                                initialValue: getDefaultValueList(data[field]),
                                rules: [
                                    {
                                        required: true,
                                        validator(_, value, callback) {
                                            if (value.length === 0) {
                                                callback(assessPersonType[currentAssessPersonType].message);
                                            } else {
                                                callback();
                                            }
                                        }
                                    }
                                ]
                            })(component)}
                        {!currentAssessPersonType && component}
                    </Form.Item>
                </Row>
            </Form.Item>
        </>
    );
};

export default RadioSelectFormItem;
